import React, { useEffect } from 'react';
import { router, withRouter } from 'umi';
import { Toast, Modal } from 'antd-mobile';
import moment from 'moment';
import { useRequest, defaultFormatResult } from '@/hooks';
import { primaryColor } from '@/defaultSettings';
import { CustomNavBar, CalendarMobile, Button } from './components';
import { getInterviewRangeMap, changeInterview } from '../service';
import styles from './updateTime.less';

const formatRangeTime = (startTime, endTime) => {
    // const st = moment(startTime).format('YYYY-MM-DD dddd aHH:mm');
    // const stA = moment(startTime).format('a');
    // const et = moment(endTime).format('HH:mm');
    // const etA = moment(endTime).format('a');
    // return `${st}-${stA === etA ? '' : etA}${et}`;
    const st = moment(startTime).format('YYYY-MM-DD dddd HH:mm');
    const et = moment(endTime).format('HH:mm');
    return `${st}-${et}`;
};

const UpdateTime = ({ location }) => {
    const { query } = location;
    const [isSelected, setIsSelected] = React.useState(false);
    const calendarRef = React.useRef(null);

    const { data: rangeMap } = useRequest(() => getInterviewRangeMap(query?.nid), {
        refreshDeps: [query?.nid],
        ready: !!query?.nid,
        ...defaultFormatResult
    });

    const { loading: submitLoading, run: submit } = useRequest(changeInterview, {
        manual: true,
        onSuccess: res => {
            const { code, msg } = res;
            if (code === 10000) {
                Toast.info('操作成功');
                history.goBack();
                return;
            }
            Toast.error(msg);
        }
    });

    const handleSelectChange = selected => {
        setIsSelected(selected);
    };

    // 提交
    const handleSubmit = () => {
        const [, v] = calendarRef.current.submit();
        // if (err) {
        //     Toast.info('日程冲突，请重新选择时间');
        //     return;
        // }
        if (v && v.length > 0) {
            // console.log('final', v);
            const finalList = v.sort((a, b) => {
                if (moment(a.startTime).isAfter(b.startTime)) {
                    return 1;
                }
                return -1;
            });
            // console.log('🚀 ~ finalList ~ finalList', finalList);
            const content = (
                <div style={{ textAlign: 'left' }}>
                    <div style={{ fontSize: 14, color: '#858B9B', marginBottom: 16 }}>
                        面试时间需等待HR确认最终结果, 修改后的面试将通过邮件再次通知！
                    </div>
                    <div
                        style={{
                            fontSize: 12,
                            color: '#49536C',
                            background: '#FAFAFA',
                            maxHeight: 238,
                            overflow: 'auto',
                            padding: '0 8px 8px'
                        }}
                    >
                        {finalList?.map((item, index) => (
                            <div key={item.startTime}>
                                <div style={{ fontSize: 10, color: '#858B9B', marginTop: 8 }}>面试时间 {index + 1}</div>
                                <div>{formatRangeTime(item.startTime, item.endTime)}</div>
                            </div>
                        ))}
                    </div>
                </div>
            );
            Modal.alert('确认提交以下时间', content, [
                { text: '取消' },
                {
                    text: '确定',
                    onPress: () => {
                        if (query?.id) {
                            submit(finalList, query?.nid);
                        }
                    }
                }
            ]);
        } else {
            Toast.info('请先选择面试时间');
        }
    };
    useEffect(() => {
        Toast.info('接受面试，并选择您方便的面试时间', 1.5);
    }, []);
    return (
        <div className={styles.blankPage}>
            <CustomNavBar
                submitText="提交"
                onSubmit={handleSubmit}
                submitLoading={submitLoading}
                style={{ flexShrink: 0 }}
                rightContent={
                    <Button
                        loading={submitLoading}
                        style={{
                            width: 'auto',
                            border: 'none',
                            padding: 0,
                            color: isSelected ? primaryColor : '#DCE0E8',
                            fontWeight: 500
                        }}
                        onClick={isSelected ? handleSubmit : null}
                    >
                        提交
                    </Button>
                }
            >
                修改面试时间
            </CustomNavBar>
            <div style={{ padding: 0, background: '#fff', flex: 1, overflow: 'hidden' }}>
                <CalendarMobile ref={calendarRef} staticRangeMap={rangeMap} onSelectChange={handleSelectChange} />
            </div>
        </div>
    );
};

export default withRouter(UpdateTime);
